<template>
  <div :class="[$style.icon, {[$style.grey]: false}]" @click.stop="clickHandle">
    <img :src="src" :srcset="srcsetCom" alt>
    <div :class="$style.textContainer">
      <span :class="[$style.text,{[$style.roll]:roll,[$style.orange]:orange}]">{{ text }}</span>
    </div>
  </div>
</template>

<script>
// import...mapGetters(['callInfo', 'agentState', 'interval', 'skillList', 'queueSize', 'agentid', 'phonenum', 'agentInfo']),} from 'vuex'
export default {
  name: 'Icon',
  props: {
    src: {
      type: String,
      default: ''
    },
    srcset: {
      type: String,
      default: ''
    },
    text: {
      type: String,
      default: ''
    },
    allow: {
      type: Boolean,
      default: false
    },
    roll: {
      type: Boolean,
      default: false
    },
    orange: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    // ...mapGetters(['callInfo', 'agentState', 'interval','skillList', 'queueSize', 'agentid', 'phonenum', 'agentInfo'])
    srcsetCom() {
      return `${this.srcset} 2x`
    }
  },
  methods: {
    clickHandle() {
      if (this.allow) {
        this.$emit('on-click')
      }
    }
  }
}
</script>
<style lang="scss" module>
@import "@/styles/mixin.scss";
.icon {
  @include flex($dir: column, $justify: center, $align: center);
  height: 100%;
  width: 100%;
  cursor: pointer;
  & > img {
    margin-bottom: 4px;
    height: 30px;
    width: 30px;
    user-select: none;
    border-radius: 50%;
  }
  & > span {
    font-size: 12px !important;
    color: #fff;
    user-select: none;
  }
}
.grey{
  cursor: not-allowed;
  // pointer-events: none;
  opacity: 0.6;
}
.textContainer{
  width: 100%;
  overflow: hidden;
  text-align: center;
  position: relative;
  .text{
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-align: center;
  }
}
.roll{
  position: relative;
  animation: roll 3s linear infinite;
}
.orange{
  color: #FDFF09;
}
@keyframes roll{
  0% {
    transform:translateX(calc(100% + 2px))
  }
  100% {
    transform:translateX(calc(-100% - 2px))
  }
}
</style>
